<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>mobile分页</title>
    <script src='../js/vue.js'></script>
    <style>
        html {
            font-size: 40px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
        }

        .navBox {
            overflow-y: auto;
            width: 20%;
            border-right: 1px solid #ddd;
            height: 100%;
        }

        .nav_item {
            padding: 20px 0;
            text-align: center;

        }

        .item_box {
            position: absolute;
            top: 0;
            right: 0;
            overflow-y: auto;
            width: 80%;
            height: 100%;
        }

        .item {
            width: 100%;
            height: 350px;
        }

        .item:nth-child(1n) {
            background: yellow;
        }

        .item:nth-child(2n) {
            background: #13c2c2;
        }

        .item:nth-child(3n) {
            background: #159b76;
        }

        .item:nth-child(4n) {
            background: orange;
        }

        .loadingBox {
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class='box'>
            <div class='navBox'>
                <div class='nav_item' v-for='(item,index) in navList' :key='index'>{{item.name}}</div>
            </div>
            <div class='item_box' :style="{'transition':`all .${number}s`,'top':`${translateY}px`}" ref='scroll'
                id='box' @touchend='touchend' @touchmove='touchmove' @touchstart='touchstart'>
                <div class='loadingBox' v-if='touchstartTitleShow'>释放可刷新...</div>
                <div class='loadingBox' v-if='touchEndTitleShow'>加载中...</div>
                <div class='item' v-for='(itme,index) in list' :key='index'>
                    {{index}}
                </div>
                <div class='loadingBox' v-if='loading'>加载中...</div>
                <div class='loadingBox' v-if='!loading&&!hasNext'>已加载全部内容</div>
            </div>
        </div>
    </div>
    <script type='text/javascript'>
        new Vue({
            el: '#app',
            data: {
                touchEndTitleShow: false, //控制手指离开屏幕的title显示
                touchstartTitleShow: false,//控制手指按下屏幕的title显示
                number: 0,//列表回弹动画时间
                translateY: 0,//列表随手指下拉而偏移的量
                startY: 0,//手指按住的位置的y坐标，也就是起始坐标
                hasNext: true,//是否还有下一页
                loading: false,//loading显示
                navList: [
                    {
                        name: '分类1'
                    },
                    {
                        name: '分类2'
                    },
                    {
                        name: '分类3'
                    },
                    {
                        name: '分类4'
                    },
                    {
                        name: '分类5'
                    },
                    {
                        name: '分类6'
                    }
                ],
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            },
            mounted() {
                this.initScrollChange()
            },
            methods: {
                //手指触碰到屏幕
                touchstart(e) {
                    this.number = 0
                    let y = e.targetTouches[0].pageY
                    this.startY = y
                },
                //手指开始滑动
                touchmove(e) {
                    let y = e.targetTouches[0].pageY
                    if ((y > this.startY) && this.$refs.scroll.scrollTop == 0) {
                        this.touchstartTitleShow = true
                        //如果当前移动距离大于初始点击坐标，则视为是下拉。并且要处于顶部才刷新，不能影响正常的列表滑动。
                        this.translateY = (y - this.startY) / 2
                    }
                },
                //手指松开
                touchend(e) {
                    let y = e.changedTouches[0].pageY
                    if (y > this.startY) {
                        this.number = 4
                        this.translateY = 0
                        this.touchstartTitleShow = false
                        this.touchEndTitleShow = true
                        setTimeout(() => {
                            this.touchEndTitleShow = false
                        }, 1000)
                        this.startY = 0
                    }
                },
                initScrollChange() {
                    this.$refs.scroll.onscroll = (e) => {
                        const offsetHeight = this.$refs.scroll.offsetHeight //可视区域的高度
                        const scrollHeight = this.$refs.scroll.scrollHeight //元素全部高度
                        const scrollTop = this.$refs.scroll.scrollTop //滚动条滚动距离
                        //可视区域高度加上滚动条滚动距离大于等于元素全部高度则表示滚动到底
                        if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
                            console.log('到底啦')
                            if (!this.loading && this.hasNext) {
                                this.getData()
                            }
                        }
                    }
                },
                getData() {
                    this.loading = true
                    setTimeout(() => {
                        for (let i = 0; i < 10; i++) {
                            this.list.push(this.list.length + 1)
                        }
                        this.loading = false
                        if (this.list.length > 30) {
                            this.hasNext = false
                        }
                    }, 1000)
                }
            }
        })
    </script>
</body>

</html>